<template>
  <div class="select-language">
    <el-dropdown trigger="click" @command="change">
      <span class="el-dropdown-link">
        {{language}}<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item
          :command="item.command"
          v-for="(item, index) in languages"
          :key="index">
          {{item.language}}
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
import Cookies from 'js-cookie'

export default {
  name: 'SelectLanguage',
  data() {
    return {
      language: '简体中文',
      languages: [{
        command: 'zh-cn',
        language: '简体中文'
      }, {
        command: 'en',
        language: 'English'
      }]
    }
  },
  mounted() {
    const val = Cookies.get('language')
    const selected = this.languages.find(item => item.command === val)
    this.language = selected.language
  },
  methods: {
    change(val) {
      const selected = this.languages.find(item => item.command === val)
      this.language = selected.language
      Cookies.set('language', val)
      location.reload()
    }
  }
}
</script>

<style scoped>
.screenfull-svg {
  display: inline-block;
  cursor: pointer;
  fill: #5a5e66;;
  width: 20px;
  height: 20px;
  vertical-align: 10px;
}
.select-language{
  cursor: pointer;
}
</style>
